/***
 *                                         ,s555SB@@&
 *                                      :9H@@@@@@@@@Xi
 *                                     1@@@@@@@@@@@@@@8
 *                                   ,8@@@@@@@@@B@@@@@@8
 *                                  :B@@@@X3hi8Bs;B@@@@@Ah,
 *             ,8i                  r@@@B:     1S ,M@@@@@@#8;
 *            1AB35.i:               X@@8 .   SGhr ,A@@@@@@@@S
 *            1@h31MX8                18Hhh3i .i3r ,A@@@@@@@@@5
 *            ;@&i,58r5                 rGSS:     :B@@@@@@@@@@A
 *             1#i  . 9i                 hX.  .: .5@@@@@@@@@@@1
 *              sG1,  ,G53s.              9#Xi;hS5 3B@@@@@@@B1
 *               .h8h.,A@@@MXSs,           #@H1:    3ssSSX@1
 *               s ,@@@@@@@@@@@@Xhi,       r#@@X1s9M8    .GA981
 *               ,. rS8H#@@@@@@@@@@#HG51;.  .h31i;9@r    .8@@@@BS;i;
 *                .19AXXXAB@@@@@@@@@@@@@@#MHXG893hrX#XGGXM@@@@@@@@@@MS
 *                s@@MM@@@hsX#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&,
 *              :GB@#3G@@Brs ,1GM@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B,
 *            .hM@@@#@@#MX 51  r;iSGAM@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@8
 *          :3B@@@@@@@@@@@&9@h :Gs   .;sSXH@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:
 *      s&HA#@@@@@@@@@@@@@@M89A;.8S.       ,r3@@@@@@@@@@@@@@@@@@@@@@@@@@@r
 *   ,13B@@@@@@@@@@@@@@@@@@@5 5B3 ;.         ;@@@@@@@@@@@@@@@@@@@@@@@@@@@i
 *  5#@@#&@@@@@@@@@@@@@@@@@@9  .39:          ;@@@@@@@@@@@@@@@@@@@@@@@@@@@;
 *  9@@@X:MM@@@@@@@@@@@@@@@#;    ;31.         H@@@@@@@@@@@@@@@@@@@@@@@@@@:
 *   SH#@B9.rM@@@@@@@@@@@@@B       :.         3@@@@@@@@@@@@@@@@@@@@@@@@@@5
 *     ,:.   9@@@@@@@@@@@#HB5                 .M@@@@@@@@@@@@@@@@@@@@@@@@@B
 *           ,ssirhSM@&1;i19911i,.             s@@@@@@@@@@@@@@@@@@@@@@@@@@S
 *              ,,,rHAri1h1rh&@#353Sh:          8@@@@@@@@@@@@@@@@@@@@@@@@@#:
 *            .A3hH@#5S553&@@#h   i:i9S          #@@@@@@@@@@@@@@@@@@@@@@@@@A.
 *
 *
 *    又看源码，看你妹妹呀！
 */

/**
 * @Author: iNathan
 * @AuthorBlog: https://inathan.wang/
 * @Date: 2019-05-07
 * @Project: IMagicMirror
 **/

import React, {Component} from 'react'

import './index.scss'

export interface  IClockState {
    hourAngle: number,
    minAngle: number,
    secAngle: number,
    transition: string,
}

export interface IClockProps {
    lau?: 'cn' | 'us'
}

class IClock extends Component<IClockProps, IClockState> {

    private TRANSITION = '100ms linear'
    private NUMBER_TRANSLATION = {
        cn: ['日', '一', '二', '三', '四', '五', '六'],
        us: ['SUN.', 'MON.', 'TUES.', 'WED.', 'THUR.', 'FRI.', 'SAT.'],
    }
    // private NUMBER_TRANSLATION = ['日', '一', '二', '三', '四', '五', '六']
    private timer: any

    constructor(props: any) {
        super(props)
        this.state = {
            hourAngle:  0,
            minAngle:   0,
            secAngle:   0,
            transition: this.TRANSITION,
        }
    }

    static defaultProps = {
        lau: 'cn',
    }

    updateTime() {
        let date = new Date()

        let secAngle: number = (date.getSeconds() + date.getMilliseconds() / 1000) * 6
        let minAngle = date.getMinutes() * 6 + secAngle / 60
        let hourAngle = (date.getHours() % 12) * 30 + minAngle / 12

        let transition = this.TRANSITION
        //  当秒针走到 0 的时候 角度其实是变小了 所以会倒着转 需要暂时删除 transition
        if (this.state.secAngle > secAngle) transition = null as any

        this.setState({
                          hourAngle:  hourAngle,
                          minAngle:   minAngle,
                          secAngle:   secAngle,
                          transition: transition,
                      })
    }

    componentWillMount() {
        this.updateTime()

        this.timer = setInterval(() => {
            this.updateTime()
        }, 100)
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer)
    }

    private static leadingZero(number: string | number) {
        return number < 10 ? '0' + number : number
    }

    render() {
        let state = this.state
        let now = new Date()
        const NUMBER_TRANSLATION = this.NUMBER_TRANSLATION

        const {lau} = this.props

        let week: string = (lau === 'cn' ? '周' : '') + NUMBER_TRANSLATION[lau!][now.getDay()]

        /* if (lau === 'cn') {
             week = '周' + NUMBER_TRANSLATION[lau][now.getDay()]
         } else if (lau === 'us') {
             week = NUMBER_TRANSLATION[lau][now.getDay()]
         }*/

        return (
            <div className={'iClock'}>
                <div className='container'>
                    <div className='minute' style={{transform: 'rotateZ(' + state.minAngle + 'deg)'}}/>
                    <div className='hour' style={{transform: 'rotateZ(' + state.hourAngle + 'deg)'}}/>
                    <div className='second'
                         style={{transition: state.transition, transform: 'rotateZ(' + state.secAngle + 'deg)'}}/>
                    <div className='center'/>
                </div>
                <div className={'display'}>
                    <div className='time'>
                        {IClock.leadingZero(now.getHours())}:{IClock.leadingZero(
                        now.getMinutes())}<span> {IClock.leadingZero(
                        now.getSeconds())}</span>
                    </div>
                    <div className='date'>
                        <div>{now.getFullYear()}-{IClock.leadingZero(now.getMonth() + 1)}-{IClock.leadingZero(
                            now.getDate())}</div>
                        <div>{week}</div>
                    </div>
                </div>

            </div>
        )
    }
}

export default IClock
